<template>
  <m-container class="print-code">
    <in-work-item :modal="modal" v-if="modal" />
    <view class="container">
      <u-section title="打印条码明细信息" :right="false" :show-line="false" color="#333" />
      <template v-if="list.length">
        <view v-for="item in list" :key="item.barcode + '-' + item.status">
          <in-work-code
            :modal="item"
            :status-type="item.status === 1 ? 'success' : 'primary'"
            :status-txt="item.status === 1 ? '已打印' : '未打印'"
            :show-repair="item.status === 1"
          />
        </view>
      </template>
      <m-empty v-else />
    </view>

    <m-fixed>
      <view class="df aic jcsb">
        <m-button
          width="32%"
          background="#fff"
          size="xl"
          @click="handleClickStartIn"
          plain
          :disabled="!getDisabled"
          :loading="loading"
        >
          集中打印
        </m-button>
        <m-button width="65%" size="xl" @click="handleClickScan" :disabled="getScanDisabled">扫码绑定托盘</m-button>
      </view>
    </m-fixed>
  </m-container>
</template>

<script>
import { router } from '@/router'
import sleep from '@/utils/sleep'
import { mapState } from 'vuex'
import { generateBarcode, autoPrint, barcodeRecordList } from '@/api/modules/in-work'

export default {
  data() {
    return {
      modal: null,
      list: [],
      index: 0,
      loading: false,
      options: {},
      show: true,
    }
  },
  computed: {
    ...mapState({
      info: (state) => state.inWork.info,
    }),
    getScanDisabled() {
      return this.list.some((item) => item.status === 0)
    },
    getDisabled() {
      return this.list.every((item) => item.status === 0) || this.loading
    },
  },
  async onLoad(options) {
    this.show = true
    this.options = options
    const { imsStockInOrderDetailList: list } = this.info
    this.index = list.findIndex((item) => item.inOrderDetailId == options.inOrderDetailId)
    this.modal = list[this.index]

    try {
      const res = await this.getData()
      if (res.length === 0) {
        await generateBarcode(this.modal.inOrderDetailId)
        await this.getData()
      }
    } catch (e) {
      console.log(e)
    }
  },
  onUnload() {
    this.show = false
    uni.hideLoading()
  },
  methods: {
    async getData() {
      const { inOrderDetailId, packageQuantity: pageSize } = this.modal
      const { rows } = await barcodeRecordList({
        inOrderDetailId,
        pageNum: 1,
        pageSize,
      })
      this.list = rows
      return rows
    },
    async loop() {
      uni.showLoading({
        title: '打印中...',
        mask: false,
      })
      await sleep(1000 * 3)
      const data = await this.getData()
      uni.hideLoading()
      if (data.every((item) => item.status === 1)) {
        uni.showToast({
          title: '打印成功',
        })
      } else {
        this.show && this.loop()
      }
    },
    async handleClickStartIn() {
      this.loading = true
      try {
        await autoPrint(this.modal.inOrderDetailId)
        uni.showToast({
          title: '操作成功，请稍等！',
          icon: 'none',
          duration: 3500,
          success: () => {
            this.loading = false
          },
        })
        this.loop()
      } catch (e) {
        this.loading = false
      }
    },
    handleClickScan() {
      router.push({
        name: 'ScanDetail',
        params: {
          inOrderDetailId: this.modal.inOrderDetailId,
          back: 2,
          type: this.options.type,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.print-code {
  .container {
    padding: 20rpx;
  }
}
</style>
